<%--
  Created by IntelliJ IDEA.
  User: 21309
  Date: 2024/11/18
  Time: 15:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人资料编辑页面</title>
    <link rel="stylesheet" href="../css/nav.css" />
    <link rel="stylesheet" href="../css/user.css" />
    <style>
        .head_center{
            a{
                text-decoration: none;
                color: #1d2124;
            }
            a:hover{
                color:#00aaff;
            }
        }
    </style>
</head>
<body>
<jsp:include page="nav.jsp" />
<div class="all">
    <div class="user_left">
        <!-- 个人中心区域 -->
        <div class="user_head">
            <img src="../../img/people.png" alt="用户头像" class="head-pic">
            <div class="head_have">
                <p class="username">用户名</p>
                <p class="user-status">欢迎回来</p>
            </div>
        </div>
        <br><br>
        <div class="head_left">
            <p>收藏</p>
            <p>13</p>
        </div>
        <div class="head_right">
            <p>点赞</p>
            <p>31</p>
        </div>
        <br>
        <hr size="5px" color="grey" />
        <div class="head_center">
            <h4>个人设置</h4>
            <h3><a href="myUser.jsp">我的预约</a></h3>
            <h3><a href="user.jsp" >个人资料</a></h3>
            <h3><a href="user_anquan.jsp">账号安全</a></h3>
            <h3><a href="message.jsp">系统通知</a></h3>
        </div>
    </div>
    <div class="content">
        <h2>系统通知</h2>
        
        <!-- 通知消息卡片 -->
        <div class="message-item">
            <div class="message-header">
                <div class="sender-info">
                    <div class="avatar">系统</div>
                </div>
                <div class="message-time">2024年10月23日08:35:22</div>
            </div>
            <div class="message-content">
                您预约的法式美容即将开始，预约时间为2024年10月23日9:00-11:00，请合理安排时间，期待为您服务
            </div>
        </div>

        <div class="message-item">
            <div class="message-header">
                <div class="sender-info">
                    <div class="avatar">系统</div>
                </div>
                <div class="message-time">2024年10月23日08:35:22</div>
            </div>
            <div class="message-content">
                您预约的法式美容取消成功，期待下次为您服务
            </div>
        </div>
    </div>
</div>

<style>
/* 容器样式 */
.content {
    height: 600px;
    overflow-y: auto;
    padding: 20px;
}

/* 滚动条样式 */
.content::-webkit-scrollbar {
    width: 6px;
}

.content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.content::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 消息卡片样式 */
.message-item {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.sender-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.avatar {
    width: 40px;
    height: 40px;
    background: #1890ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
}

.message-time {
    color: #999;
    font-size: 14px;
}

.message-content {
    color: #333;
    line-height: 1.6;
}

/* 标题样式 */
h2 {
    margin-bottom: 20px;
    color: #333;
}
</style>

</body>
</html>